{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% extends "firefox/welcome/base.html" %}

{% block page_title %}Set Firefox containers to different countries with Mozilla VPN{% endblock %}

{% block page_image %}{{ static('img/products/vpn/common/social-share.png') }}{% endblock %}

{% block body_class %}welcome-page12{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-picto') }}
  {{ css_bundle('firefox_welcome_page12') }}
{% endblock %}

{% set _entrypoint = 'mozilla.org-firefox-welcome-12' %}
{% set _utm_campaign = 'welcome-12-vpn' %}

{% block shoulder_cta %}{% endblock %}

{% block content_intro %}
  <section class="c-content-main">
    <div class="mzp-l-content mzp-t-content-md">
      <img class="c-main-image" src="{{ static('protocol/img/logos/mozilla/vpn/logo-flat.svg') }}" width="60" alt="">
      <h1 class="c-main-title">Set Firefox containers to different countries with <strong>Mozilla VPN</strong></h1>
      <p class="c-main-tagline">Mozilla VPN is now integrated into Firefox containers, meaning you can change your device’s location within each container.</p>
    </div>
  </section>
{% endblock %}

{% block content_body %}
<section class="page-body">
  <div class="mzp-l-content mzp-t-content-md">
    <div class="mzp-l-columns mzp-t-columns-two">

      <div class="mzp-c-picto">
        <div class="mzp-c-picto-image">
          {% include 'firefox/welcome/includes/page12/countries.svg' %}
        </div>
        <h3 class="mzp-c-picto-title">One window, multiple countries</h3>
        <div class="mzp-c-picto-body">
          <p>Open a work container and set it to browse from Paris; a shopping one for New York; and a finance one for Stockholm.</p>
        </div>
      </div>

      <div class="mzp-c-picto">
        <div class="mzp-c-picto-image">
          {% include 'firefox/welcome/includes/page12/globe.svg' %}
        </div>
        <h3 class="mzp-c-picto-title">Access global info & entertainment</h3>
        <div class="mzp-c-picto-body">
          <p>Browsing with your VPN set to a foreign location could let you see that country’s content, like local news, sporting events, livestreams and more.</p>
        </div>
      </div>
    </div>

    <div class="c-main-cta">
      {{ vpn_product_referral_link(
            referral_id='welcome-page12',
            link_text='Get Mozilla VPN',
            class_name='mzp-t-product mzp-t-xl',
            optional_attributes= {
                'data-cta-text' : 'Get Mozilla VPN',
                'data-cta-type' : 'vpn',
                'data-cta-position' : 'primary-cta',
            }
        ) }}
    </div>
  </div>
</section>
{% endblock %}

{% block content_utility %}
<p>
  <strong>
    <a href="https://support.mozilla.org/kb/firefox-browser-welcome-pages/?utm_source={{ _entrypoint }}&utm_medium=referral&utm_campaign={{ _utm_campaign }}&entrypoint={{ _entrypoint }}">
      Why am I seeing this?
    </a>
  </strong>
</p>
{% endblock %}
